<template>
  <div class="gi_table_page">
    <GiTable
        row-key="id"
        :data="dataList"
        :columns="columns"
        :loading="loading"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="pagination"
        :disabled-tools="['size']"
        :disabled-column-keys="['songName']"
        @refresh="search"
    >
      <template #toolbar-left>
        <a-input-search v-model="queryForm.songName" style="width: 250px;"  placeholder="搜索歌曲名/词曲作者/演唱者" allow-clear @search="search"/>
<!--        <a-input-search v-model="queryForm.lyricist" placeholder="搜索词作者" allow-clear @search="search"/>-->
<!--        <a-input-search v-model="queryForm.composer" placeholder="搜索曲作者" allow-clear @search="search"/>-->
<!--        <a-input-search v-model="queryForm.singer" placeholder="搜索演唱者" allow-clear @search="search"/>-->
<!--        <a-input-search v-model="queryForm.lyricCopyrightCompany" placeholder="搜索词版权公司" allow-clear
                        @search="search"/>
        <a-input-search v-model="queryForm.musicCopyrightCompany" placeholder="搜索曲版权公司" allow-clear
                        @search="search"/>-->

        <a-button @click="reset">
          <template #icon>
            <icon-refresh/>
          </template>
          <template #default>重置</template>
        </a-button>
      </template>
      <template #toolbar-right>
        <a-button v-permission="['music:copyright:create']" type="primary" @click="onAdd">
          <template #icon>
            <icon-plus/>
          </template>
          <template #default>新增</template>
        </a-button>
        <a-button v-permission="['music:copyright:import']" @click="onImport">
          <template #icon>
            <icon-upload/>
          </template>
          <template #default>导入</template>
        </a-button>
        <a-button v-permission="['music:copyright:export']" @click="onExport">
          <template #icon>
            <icon-download/>
          </template>
          <template #default>导出</template>
        </a-button>
      </template>

      <!-- 给单元格设置样式-->
      <template #songName="{ record }">
        <CellCopy :content="record.songName"/>
      </template>

      <template #lyricist="{ record }">
        <CellCopy :content="record.lyricist"/>
      </template>

      <template #composer="{ record }">
<!--        <GiCellCopy :text="record.composer"/>-->
        <CellCopy :content="record.composer"/>
      </template>

      <template #singer="{ record }">
        <CellCopy :content="record.singer" />
      </template>

      <template #lyricCopyrightCompany="{ record }">
        <a-typography-paragraph :ellipsis="{rows: 1,showTooltip: true,css: true}">
          {{ record.lyricCopyrightCompany }}
        </a-typography-paragraph>
      </template>

      <template #musicCopyrightCompany="{ record }">
        <a-typography-paragraph :ellipsis="{rows: 1,showTooltip: true,css: true}">
          {{ record.musicCopyrightCompany }}
        </a-typography-paragraph>
      </template>

      <!-- 操作部分-->
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['music:copyright:get']" title="详情" @click="onDetail(record)">详情</a-link>
          <a-link v-permission="['music:copyright:update']" title="修改" @click="onUpdate(record)">修改</a-link>
          <a-link
              v-permission="['music:copyright:delete']"
              status="danger"
              :disabled="record.disabled"
              :title="record.disabled ? '不可删除' : '删除'"
              @click="onDelete(record)"
          >
            删除
          </a-link>
        </a-space>
      </template>
    </GiTable>

    <CopyrightAddModal ref="CopyrightAddModalRef" @save-success="search"/>
    <CopyrightDetailDrawer ref="CopyrightDetailDrawerRef"/>
    <CopyrightImportDrawer ref="CopyrightImportDrawerRef" @save-success="search"/>
  </div>
</template>

<script setup lang="ts">
import type {TableInstance} from '@arco-design/web-vue'
import CopyrightAddModal from './CopyrightAddModal.vue'
import CopyrightDetailDrawer from './CopyrightDetailDrawer.vue'
import CopyrightImportDrawer from './CopyrightImportDrawer.vue'
import {
  type CopyrightResp,
  type CopyrightQuery,
  deleteCopyright,
  exportCopyright,
  listCopyright
} from '@/apis/music/copyright'
import {useDownload, useTable} from '@/hooks'
import {isMobile} from '@/utils'
import has from '@/utils/has'

defineOptions({name: 'Copyright'})


const queryForm = reactive<CopyrightQuery>({
  songName: undefined,
  lyricist: undefined,
  composer: undefined,
  singer: undefined,
  lyricCopyrightCompany: undefined,
  musicCopyrightCompany: undefined,
  sort: ['songName,asc']
})

const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete
} = useTable((page) => listCopyright({...queryForm, ...page}), {immediate: true})
const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 90,
    align: 'center',
    render: ({rowIndex}) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
    fixed: !isMobile() ? 'left' : undefined,
  },
  {title: '歌曲名', dataIndex: 'songName', slotName: 'songName'},
  {title: '词作者', dataIndex: 'lyricist', slotName: 'lyricist'},
  {title: '曲作者', dataIndex: 'composer', slotName: 'composer'},
  {title: '演唱者', dataIndex: 'singer', slotName: 'singer'},
  {title: '词版权公司', dataIndex: 'lyricCopyrightCompany', slotName: 'lyricCopyrightCompany'},
  {title: '曲版权公司', dataIndex: 'musicCopyrightCompany', slotName: 'musicCopyrightCompany'},
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action',
    width: 160,
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
    show: has.hasPermOr(['music:copyright:get', 'music:copyright:update', 'music:copyright:delete'])
  }
]

// 重置
const reset = () => {
  queryForm.songName = undefined
  queryForm.lyricist = undefined
  queryForm.composer = undefined
  queryForm.singer = undefined
  queryForm.lyricCopyrightCompany = undefined
  queryForm.musicCopyrightCompany = undefined
  search()
}

// 删除
const onDelete = (record: CopyrightResp) => {
  return handleDelete(() => deleteCopyright(record.id), {
    content: `是否确定删除该条数据？`,
    showModal: true
  })
}

const CopyrightImportDrawerRef = ref<InstanceType<typeof CopyrightImportDrawer>>()
// 导入
const onImport = () => {
  console.log('onImport')
  CopyrightImportDrawerRef.value?.onOpen()
}

// 导出
const onExport = () => {
  useDownload(() => exportCopyright(queryForm))
}

const CopyrightAddModalRef = ref<InstanceType<typeof CopyrightAddModal>>()
// 新增
const onAdd = () => {
  CopyrightAddModalRef.value?.onAdd()
}

// 修改
const onUpdate = (record: CopyrightResp) => {
  CopyrightAddModalRef.value?.onUpdate(record.id)
}

const CopyrightDetailDrawerRef = ref<InstanceType<typeof CopyrightDetailDrawer>>()
// 详情
const onDetail = (record: CopyrightResp) => {
  CopyrightDetailDrawerRef.value?.onOpen(record.id)
}
</script>

<style scoped lang="scss"></style>
